<template>
  <el-container class="home_container">
    <el-header class="home_header">
      <div class="home_title">宿舍管理系统-系统管理员</div>
      <div class="home_userinfoContainer">
        <el-dropdown>
          <span class="el-dropdown-link home_userinfo">
            {{admin.name}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container class="main-container">
      <el-aside class="home_aside" width="200px">
        <el-menu router>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><monitor /></el-icon>
              <span>宿管模块</span>
            </template>
            <el-menu-item index="/dormitoryAdminAdd" :class="$route.path=='/dormitoryAdminAdd'?'is-active':''">
              <el-icon><folder-add /></el-icon>
              <span>添加宿管</span>
            </el-menu-item>
            <el-menu-item index="/dormitoryAdminManager" :class="$route.path=='/dormitoryAdminManager'?'is-active':''">
              <el-icon><document-copy /></el-icon>
              <span>宿管管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><UserSolid /></el-icon>
              <span>学生模块</span>
            </template>
            <el-menu-item index="/studentAdd" :class="$route.path=='/studentAdd'?'is-active':''">
              <el-icon><folder-add /></el-icon>
              <span>添加学生</span>
            </el-menu-item>
            <el-menu-item index="/studentManager">
              <el-icon><document-copy /></el-icon>
              <span>学生管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><UserSolid /></el-icon>
              <span>楼宇模块</span>
            </template>
            <el-menu-item index="/buildingAdd">
              <el-icon><folder-add /></el-icon>
              <span>添加楼宇</span>
            </el-menu-item>
            <el-menu-item index="/buildingManager">
              <el-icon><document-copy /></el-icon>
              <span>楼宇管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><home /></el-icon>
              <span>宿舍模块</span>
            </template>
            <el-menu-item index="/dormitoryAdd">
              <el-icon><folder-add /></el-icon>
              <span>添加宿舍</span>
            </el-menu-item>
            <el-menu-item index="/dormitoryManager">
              <el-icon><document-copy /></el-icon>
              <span>宿舍管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/moveoutRegister">
            <el-icon><unfold /></el-icon>
            <span>学生迁出登记</span>
          </el-menu-item>

          <el-menu-item index="/moveoutRecord">
            <el-icon><order /></el-icon>
            <span>学生迁出记录</span>
          </el-menu-item>

    
        </el-menu>
      </el-aside>

      <el-container class="content-container">
        <el-main>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.meta.title || $route.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view />
        </el-main>
        <el-footer class="home_footer">宿舍管理系统</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

// 加载 CozeWebSDK
const loadCozeSDK = () => {
  const script = document.createElement('script')
  script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js'
  script.onload = () => {
    new CozeWebSDK.WebChatClient({
      config: {
        bot_id: '7517987034699677706',
      },
      componentProps: {
        title: 'Coze',
      },
      auth: {
        type: 'token',
        token: 'pat_HhQuclYyl2ljDwwqBupkiKdcE7jVa8OQKigGjNB2m63WqjZeEIJmpSoKeT7Tkufn',
        onRefreshToken: () => 'pat_HhQuclYyl2ljDwwqBupkiKdcE7jVa8OQKigGjNB2m63WqjZeEIJmpSoKeT7Tkufn'
      }
    })
  }
  document.head.appendChild(script)
}

// 原有逻辑
const router = useRouter()
const admin = ref({})

const logout = () => {
  ElMessageBox.confirm('确定要注销登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('systemAdmin')
    router.replace('/login')
  })
}

onMounted(() => {
  loadCozeSDK() // 加载Coze SDK
  
  const adminData = JSON.parse(localStorage.getItem('systemAdmin'))
  if (adminData) {
    admin.value = adminData
  }
})
</script>

<style scoped>
.home_container {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}

.home_header {
  background-color: #2B2B2B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: white;
}

.home_title {
  color: #C2C2C2;
  font-size: 1.2rem;
}

.home_userinfo {
  color: #fff;
  cursor: pointer;
}

.home_userinfoContainer {
  margin-right: 20px;
}

.home_aside {
  background-color: #FFFFFF;
  height: calc(100vh - 60px);
}

.home_footer {
  background-color: #FFFFFF;
  color: #000000;
  font-size: 0.9rem;
  line-height: 60px;
  text-align: center;
}

.el-menu {
  border-right: none;
}

.el-main {
  padding: 20px;
}
</style>